import { useObservable } from '@gnlab/utils/env-react/rx'
import { Radio, message } from 'antd'
import config from '@/config'
import { useLoginMethod } from '@/desktop/logics/login'
import services from '@/services'
import { AuthMethod, LoginStatus } from '@/services/auth'
import AppsLogin from './apps'
import InternalLogin from './internal'

export default function Login() {
  useEffect(() => {
    if (config.EXTERNAL_AUTH_PAGE) location.replace(config.EXTERNAL_AUTH_PAGE)
  }, [])

  useObservable(services.auth.info$, info => {
    if (info.status === LoginStatus.NotLoggedIn && !!(info.message ?? '')) {
      void message.warning(info.message)
    }
  })

  const [methods, method, switchMethod] = useLoginMethod()

  const options = useMemo(() => {
    return [
      { label: '流量超市登录', value: AuthMethod.apps },
      { label: '用户名/密码登录', value: AuthMethod.internal },
    ].filter(option => methods.includes(option.value))
  }, [methods])

  return <div css={styles.wrap}>
    <img css={styles.picture} src="login/background-2.png" />
    <div css={styles.content}>
      {options.length > 1 ? (
        <header>
          <Radio.Group
            optionType="button"
            buttonStyle="solid"
            value={method}
            onChange={e => switchMethod(e.target.value as AuthMethod)}
            options={options}
          />
        </header>
      ) : null}
      <main>
        {method === AuthMethod.apps ? <AppsLogin /> : null}
        {method === AuthMethod.internal ? <InternalLogin /> : null}
      </main>
    </div>
  </div>
}

const styles = {
  wrap: css`
    background-image: url('login/background-1.png');
    background-size: 100% 100%;
    height: 100%;
  `,
  picture: css`
    max-width: 43.33821em;
    font-size: 12px;
    bottom: 4em;
    position: absolute;
    right: 6em;

  `,
  content: css`
    position: absolute;
    left: 22%;
    top: 16%;
    z-index: 999;
    border-radius: 12px;
    overflow: hidden;

    .ant-radio-group {
      width: 100%;
      display: flex;
    }
    .ant-radio-button-wrapper {
      flex: 1;
      text-align: center;
      border: none !important;
      background-color: transparent;
      font-size: 13px;
      border-radius: 0 !important;
    }
    .ant-radio-button-wrapper::before {
      display: none;
    }
    .ant-radio-button-wrapper-checked {
      background-color: transparent !important;
      border: none !important;
      border-bottom: 1px solid #2761ff !important;
      color: #2761ff !important;

    }
  `,
}
